import React, { useEffect, useRef, useState } from 'react';
import { connect } from 'dva';

import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
import { Divider, Tooltip, Spin, message } from 'antd';
import { apiLogDownload, apiLogGetList } from '@/services/otherServices';
import { FileSearchOutlined, DownloadOutlined } from '@ant-design/icons';
import Search from './Search';
import { history } from 'umi';
import { useRequest, useUpdateEffect } from '@umijs/hooks';
import { btnPermission, downloadFile } from '@/utils/utils';

const List = (props: any) => {
  const { btnPermissionLoading } = props;
  const actionRef = useRef<ActionType>();
  const [size, setSize]: any = useState('large');
  const [current, setCurrent] = useState(1);
  const [searchValue, setSearchValue] = useState({});
  const [dataSource, setDataSource] = useState([]);

  /*
   * 列表请求
   * */
  const { loading: pageLoading, run: getPage } = useRequest(apiLogGetList, {
    manual: true,
    debounceInterval: 500,
    onSuccess: (res, params) => {
      setDataSource(res);
    },
  });

  const getPageData = () => {
    getPage({
      ...searchValue,
    });
  };

  useUpdateEffect(() => {
    getPageData();
  }, [searchValue]);

  const columns: ProColumns<any>[] = [
    {
      title: '编号',
      dataIndex: 'a',
      width: 80,
      hideInSearch: true,
      render: (text, record, index) => (
        <span>{(current - 1) * 10 + index + 1}</span>
      ),
    },
    {
      title: '设备号',
      dataIndex: 'deviceId',
    },
    {
      title: '文件名',
      dataIndex: 'logName',
      hideInSearch: true,
    },
  ];
  if (btnPermission(history.location.pathname, ['btn_log_download'])) {
    columns.push({
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => (
        <>
          {btnPermission(history.location.pathname, 'btn_log_download') && (
            <span>
              <a
                onClick={() => {
                  apiLogDownload({
                    deviceId: record.deviceId,
                    logName: record.logName,
                  }).then((res: any) => {
                    message.success('下载成功，请联系开发人员获取。');
                  });
                }}
              >
                <Tooltip mouseEnterDelay={0.5} title="下载">
                  <DownloadOutlined style={{ fontSize: 18 }} />
                </Tooltip>
              </a>
            </span>
          )}
        </>
      ),
    });
  }

  return (
    <div className={'spin-bg-white'}>
      <Spin tip={'权限获取中,请稍等...'} spinning={btnPermissionLoading}>
        <ProTable<any>
          loading={pageLoading}
          dataSource={dataSource}
          actionRef={actionRef}
          tableAlertRender={false}
          search={false}
          options={{
            fullScreen: false,
            density: true,
            reload: false,
            setting: true,
          }}
          rowKey="deviceId"
          size={size}
          onSizeChange={(s: any) => {
            setSize(s);
          }}
          pagination={{
            onChange: (page, pageSize) => {
              setCurrent(page);
            },
          }}
          headerTitle={
            btnPermission(history.location.pathname, 'btn_log_search') && (
              <Search
                loading={pageLoading}
                callbackValue={(value: any) => {
                  setSearchValue(value);
                }}
              />
            )
          }
          columns={columns}
        />
      </Spin>
    </div>
  );
};
export default connect(({ globalModel }: any) => ({
  btnPermissionLoading: globalModel.btnPermissionLoading,
}))(List);
